import './Mars3dSetUp.scss'
import { v4 } from 'uuid'
import { Button } from 'antd'
import { useState } from 'react'
import { useMount } from 'ahooks'
import PropTypes from 'prop-types'

import { UseConfigSection } from '../../Template/FormTemplate'
const Mars3dAddGro = ({ data, ModalEvent, Off }) => {
    Mars3dAddGro.propTypes = { data: PropTypes.object, ModalEvent: PropTypes.object, Off: PropTypes.func }

    const [Uuid, setUuid] = useState()
    const [List, setList] = useState()
    const [Data, setData] = useState()

    useMount(() => {
        if (data.type === 'add') {
            const uuid = v4()
            const newObj = { ...data.obj, [uuid]: { key: uuid, children: [] } }
            setData(newObj)
            setUuid(uuid)
            setList([
                { key: 101, uuid, label: '分组名称', type: 'InputTemp', name: 'label' },
                { key: 102, uuid, label: '分组排序', type: 'InputNumberTemp', name: 'sort' },
            ])
        }
        if (data.type === 'put') {
            setData(data.obj)
            setUuid(data.uuid)
            setList([
                { key: 101, uuid: data.uuid, label: '分组名称', type: 'InputTemp', name: 'label' },
                { key: 102, uuid: data.uuid, label: '分组排序', type: 'InputNumberTemp', name: 'sort' },
            ])
        }
    })

    const onSubmit = () => {
        ModalEvent.emit({ type: 'addGrouping', data: Data })
        Off()
    }

    const onClose = () => {
        Off()
    }

    return (
        <div className='Mars3dSetUp Mars3dAddEle'>
            <div className='FormList'>
                {Data && Uuid && List && UseConfigSection(Data, List)}
            </div>
            <div className='Button'>
                <Button type='primary' danger onClick={onClose}>取消</Button>
                <Button type='primary' onClick={onSubmit}>保存</Button>
            </div>
        </div>
    )
};

export default Mars3dAddGro